<template>
  <div>
    <!-- head -->
    <el-row>
      <el-col :span="16">
        <div class="grid-content bg-purple-dark head">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="人员搜索">
                  <el-input
                    placeholder="请输入人员名称"
                    v-model="form.userName"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="角色">
                  <el-radio v-model="form.roleId" label="1">运营人员</el-radio>
                  <el-radio v-model="form.roleId" label="2">运维人员</el-radio>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button
                  class="el-icon-search"
                  type="primary"
                  @click="onSubmit"
                  >查询</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div></el-col
      >
    </el-row>
    <!-- table -->
    <el-row class="mgb">
      <el-table :data="currentPageRecords" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="userName" label="人员名称" width="180">
        </el-table-column>
        <el-table-column prop="userName" label="角色"> </el-table-column>
        <el-table-column prop="mobile" label="联系电话" width="180">
        </el-table-column>
        <el-table-column prop="workCount" label="完成工单(本月）" width="180">
        </el-table-column>
        <el-table-column prop="progressTotal" label="进行中工单" width="180">
        </el-table-column>
        <el-table-column prop="cancelCount" label="拒绝工单(本月）" width="180">
        </el-table-column>
        <el-table-column prop="date" label="操作" width="180">
          <template slot-scope="scope"
            ><a
              href="javascript:void(0);"
              @click="checkDetail(scope.$index, scope.row)"
              >查看详情</a
            ></template
          >
        </el-table-column>
        <template #append
          >
          <el-row class="myPagination">
            共{{ totalCount }}条记录 第 {{ currentPage }}/{{
            totalPage
          }}
          页<el-button-group class="fr">
            <el-button
              type="primary"
              class="prePage"
              ref="pageUp"
              @click="pageBack"
              :disabled="isBackDisabled"
              >上一页</el-button
            >
            <el-button
              type="primary"
              ref="pageBack"
              @click="pageUp"
              :disabled="isUpDisabled"
              >下一页</el-button
            >
          </el-button-group>
          </el-row>
          </template
        >
      </el-table>
    </el-row>

    <!-- 查看详情 -->
    <el-dialog :visible.sync="roleDetailVisible" title="人员详情" width="60%">
      <el-descriptions :column="1">
        <el-descriptions-item label="人员名称">{{
          userDetail.userName
        }}</el-descriptions-item>
        <el-descriptions-item label="角色">{{
          userDetail.roleName
        }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{
          userDetail.mobile
        }}</el-descriptions-item>
        <el-descriptions-item label="负责区域">{{
          userDetail.regionName
        }}</el-descriptions-item>
      </el-descriptions>
      <el-row>
        <el-row class="taskTable">
          <el-row class="tableHead">
            <el-col class="tableItem">&emsp;&emsp;&emsp;&emsp;</el-col>
            <el-col class="tableItem">总工单数</el-col>
            <el-col class="tableItem">拒绝工单</el-col>
            <el-col class="tableItem">完成工单</el-col>
            <el-col class="tableItem">进行中工单</el-col>
          </el-row>
          <el-row class="tableBody">
            <el-col class="tableItem">本周</el-col>
            <el-col class="tableItem">{{ weekData.total }}</el-col>
            <el-col class="tableItem">{{ weekData.cancelCount }}</el-col>
            <el-col class="tableItem">{{ weekData.workCount }}</el-col>
            <el-col class="tableItem">{{ weekData.progressTotal }}</el-col>
          </el-row>
          <el-row class="tableBody">
            <el-col class="tableItem">本月</el-col>
            <el-col class="tableItem">{{ monthData.total }}</el-col>
            <el-col class="tableItem">{{ monthData.cancelCount }}</el-col>
            <el-col class="tableItem">{{ monthData.workCount }}</el-col>
            <el-col class="tableItem">{{ monthData.progressTotal }}</el-col>
          </el-row>
          <el-row class="tableBody">
            <el-col class="tableItem">本年</el-col>
            <el-col class="tableItem">{{ yearData.total }}</el-col>
            <el-col class="tableItem">{{ yearData.cancelCount }}</el-col>
            <el-col class="tableItem">{{ yearData.workCount }}</el-col>
            <el-col class="tableItem">{{ yearData.progressTotal }}</el-col>
          </el-row>
        </el-row>
      </el-row>
      <el-row>
        <el-button-group class="fr">
          <el-button type="primary" @click="roleDetailVisible=false">取消</el-button>
          <el-button type="primary" @click="roleDetailVisible=false">确认</el-button>
        </el-button-group>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getUsersWork, getUserParticulars, getUserWork } from '@/api/staff'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      form: {
        roleId: '',
        userName: '',
        pageIndex: 1,
        pageSize: 10
      },
      // 表格数据
      currentPageRecords: [],
      totalPage: 0,
      totalCount: 0,
      currentPage: 1,
      isBackDisabled: true,
      isUpDisabled: false,
      roleDetailVisible: false,
      detailData: [],
      userDetail: {},
      // 时间数据
      orderTime: dayjs(Date.now()).format('YYYY-MM-DD'), // 订单结束时间
      mondayTime: dayjs()
        .subtract(dayjs().day() ? dayjs().day() - 1 : 6, 'day')
        .format('YYYY-MM-DD'), // 当前这周第一天的时间
      oneDyaTime: dayjs(Date.now())
        .startOf('month')
        .format('YYYY-MM-DD HH:mm:ss'), // 当前时间月份的第一天具体时间
      oneDaySmall: dayjs(Date.now()).startOf('month').format('YYYY-MM-DD'), // 当前时间月份的第一天初略时间
      yearDay: dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss'), // 今年的第一天
      newTime: dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss'), // 当前具体时间
      weekData: [],
      monthData: [],
      yearData: []
    }
  },
  created () {
    this.getUsersWork()
  },
  methods: {
    // 下一页
    pageUp () {
      this.currentPage++
      this.isBackDisabled = false
      if (this.currentPage === this.totalPage) {
        this.isUpDisabled = true
      }
    },
    // 上一页
    pageBack () {
      this.currentPage--
      this.isUpDisabled = false
      if (this.currentPage === 1) {
        this.isBackDisabled = true
      }
    },
    async getUsersWork () {
      const res = await getUsersWork(this.form)
      Object.keys(res).forEach((key) => {
        this[key] = res[key]
      })
    },
    async checkDetail (i, r) {
      this.roleDetailVisible = true
      const res = await getUserParticulars(r.userId)
      this.userDetail = res
      const weekData = await getUserWork({
        userId: r.userId,
        start: this.mondayTime + ' 00:00:00',
        end: this.newTime
      })
      this.weekData = weekData
      const monthData = await getUserWork({
        userId: r.userId,
        start: this.oneDyaTime,
        end: this.newTime
      })
      this.monthData = monthData
      const yearData = await getUserWork({
        userId: r.userId,
        start: this.yearDay,
        end: this.newTime
      })
      this.yearData = yearData
    },
    // 查询功能
    onSubmit () {
      this.getUsersWork()
      this.form = {
        roleId: '',
        userName: '',
        pageIndex: 1,
        pageSize: 10
      }
    },
    diyIndex (index) {}
  },
  watch: {
    currentPage (val) {
      this.form.pageIndex = val
      this.getUsersWork()
    }
  }
}
</script>

<style lang="scss" scoped>
.fr {
  float: right;
  display: flex;
  justify-content: space-between;
  width: 300px;
}
.fl {
  float: left;
}
.prePage {
  padding-right: 20px;
}
.taskTable {
  border-left: 1px #d8dde3 solid;
  border-top: 1px #d8dde3 solid;
  margin-bottom:20px;
  .tableHead {
    background-color: #f7f8fd;
    border-bottom: 1px #d8dde3 solid;
    .tableItem {
      border-right: 1px #d8dde3 solid;
      height: 40px;
      line-height: 40px;
      text-align: center;
      width: 20%;
    }
  }
  .tableBody {
    border-bottom: 1px #d8dde3 solid;
    .tableItem {
      border-right: 1px #d8dde3 solid;
      height: 40px;
      line-height: 40px;
      text-align: center;
      width: 20%;
    }
  }
}
.mgb {
  margin-bottom: 20px;
}
.myPagination {
  height: 40px;
  line-height: 60px;
  margin-top:20px
}
</style>
